<?xml version="1.0" encoding="UTF-8"?>
<!--
     Any copyright is dedicated to the Public Domain.
     http://creativecommons.org/publicdomain/zero/1.0/
-->
<!-- Reference case for behavior of the 'baseline' value for align-items and
     align-self.

     NOTE: For multi-line 'display: block' flex items in the testcase, we use
     an inline-table here in the reference case, so that we get first-line
     baseline alignment. (If we used an inline-block instead, that would give
     us *last-line* baseline alignment.)
-->
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <style>
      .flexbox {
        display: block;
        border: 1px dashed blue;
        font: 14px sans-serif;
      }

      div   { display: inline-block; }
      table { display: inline-table; }

      .big {
        height: 100px;
        font: 24px sans-serif;
        margin-top: 20px;
      }

      .lime   { background: lime;   }
      .pink   { background: pink;   }
      .aqua   { background: aqua;   }
   </style>
  </head>
  <body>
    <div class="flexbox">
      <div class="lime">text</div
      ><button>btn</button
      ><input type="radio"
     /><input type="checkbox"
     /><label class="pink">label</label
      ><table cellspacing="0" cellpadding="0"  class="aqua">
        <label>lab<br/>el</label>
      </table
      ><table cellspacing="0" cellpadding="0">
        <fieldset>field<br/>set</fieldset>
      </table
      ><table cellspacing="0" cellpadding="0">
        <fieldset><legend>leg</legend>field<br/>set</fieldset>
      </table
      ><table cellspacing="0" cellpadding="0">
        <fieldset><legend>leg<br/>end</legend>field<br/>set</fieldset>
      </table>
    </div>
  </body>
</html>
